<template>
	<view class="deviceStock">
		<!-- 设备库存管理 -->
		<navBar title="设备库存管理" goBackUrl="/pages/homePage/platform" @goBack="goBack"></navBar>
		
		<image @click="getDeviceSelect" class="image2" src="/subpackage-equipment/static/gengduo.png" mode=""></image>
		
		<view class="search">
			<baseInput @inputChange="inputChange" @clearInput="clearInput"></baseInput>
		</view>
		
		<scroll-view scroll-y="true" class="scroll-box">
			<view class="content">
				<view class="nav2" @click="getstation">
					<view class="name">
						<image class="image" src="/static/image/jidi.png" mode=""></image>
						<view class="fonzt active" v-if="stationName ===''">点击选择基地</view>
						<view class="fonzt" v-else>{{ stationName }}</view>
					</view>
					<u-icon name="arrow-down" color="#A7AEBD" size="22"></u-icon>
				</view>
				
				<view class="nav2" @click="getBaseSelect">
					<view class="name">
						<image class="image" src="/subpackage-equipment/static/shebei22.png" mode=""></image>
						<view class="fonzt active" v-if="deviceTypeName === ''">点击选择设备类型和名称</view>
						<view class="fonzt" v-else>{{ deviceTypeName }}</view>
					</view>
					<u-icon name="arrow-down" color="#A7AEBD" size="22"></u-icon>
				</view>
				
				
				<view class="info uniCollapse">
					<uni-collapse>
						<uni-collapse-item v-for="(item,index) in deviceList" title-border="show" :key="item.id" :name="index" :title="item.allName" :value="item.totalNum + ''">
							<template v-slot:title>
								<view class="collapse-title">
									<view class="left">
										{{ item.allName }}
									</view>
									<view class="right">
										{{ item.totalNum }}
									</view>
								</view>
							</template>
							<view class="center" v-for="(value,key) in item.infoList" :key="key">
								<view class="item">
									<text class="name">资产归属：</text>
									<text class="value">{{ value.assetOwnership }}</text>
								</view>
								<view class="item">
									<view class="name">设备编号：</view>
									<view class="value">{{ value.code }}</view>
								</view>
								<view class="item">
									<view class="name">规格型号：</view>
									<view class="value">{{ value.specificationModel }}</view>
								</view>
								<!-- <view class="item">
									<view class="name">存储区域：</view>
									<view class="value">{{ value.storageAreaName }}</view>
								</view> -->
								<view class="item">
									<view class="name">基地名称：</view>
									<view class="value">{{ value.stationName }}</view>
								</view>
								
								<view class="deviceState color1" v-if="value.state === 0">
									正常
								</view>
								<view class="deviceState color2" v-if="value.state === 2" >
									维养中
								</view>
								<view class="deviceState color3" v-if="value.state === 1">
									使用中
								</view>
								<view class="deviceState color4" v-if="value.state === 3">
									维修中
								</view>
							</view>
						</uni-collapse-item>
					</uni-collapse>
				</view>
			</view>
		</scroll-view>
		
		<!-- <view class="fixedButton">
			<u-button type="primary"  :loading="loading" text="移库" @click="getMoveStock"></u-button>
		</view> -->
		<view class="footer-button">
			<view class="button-placeholder"></view>
			<view class="button-group">
				<button @click="getMoveStock" :loading="loading" class="button-primary">移库</button> 
			</view>
		</view>
		
		<!-- 选择基地 -->
		<u-picker
			:show="isShowStation" 
			:columns="stationList" 
			keyName="name" 
			:immediateChange="true"
			@confirm="stationConfirm" 
			@cancel="stationCancel"> 
		</u-picker>
		
		<!-- 筛选设备类型 和 设备名称 -->
		<BaseSelect
			:isShow="isShowBaseSelect" 
			:deviceTypeList="deviceTypeList"
			:titleObj="titleObj"
			@cancel="baseSelectCancel"
			@confrim="baseSelectConfrim">
		</BaseSelect>
		
		<!-- 点击图标出现 筛选设备 -->
		<DeviceStateSelect
		:isShow="isShowDeviceState"
		@confirm="confirm"
		@reset="reset">
		</DeviceStateSelect>
	</view>
</template>

<script>
	import { getStationList} from "@/api/baseManage/baseManage.js"
	import { getDeviceType } from "@/api/emergency/emergencyDispatch.js"
	import { getEquipmentInventoryList } from "@/api/device/deviceStock.js"
	import BaseSelect from "@/components/baseSelect/baseSelect.vue"
	import DeviceStateSelect from "./deviceStateSelect.vue"
	import baseInput from "@/components/baseInput/baseInput.vue"
	import mixins from "@/utils/mixins.js"
	import uniCollapse from "./../../components/uni-collapse/components/uni-collapse/uni-collapse.vue";
	export default {
		mixins: [mixins],
		components: {
			baseInput, BaseSelect, DeviceStateSelect,uniCollapse
		},
		data() {
			return {
				loading: false,
				stationName: "",        // 基地名称
				deviceTypeName: "",     // 设备类型和名称
				stationList: [],              // 基地数据列表
				isShowStation: false,         // 基地弹窗是否显示
				isShowBaseSelect: false,      // 筛选设备类型和名称
				deviceTypeList: [],           // 设备类型 和 设备类型 数据
				deviceList: [],               // 设备列表
				obj: {
					stationId: "",      // 基地id
					deviceTypeIds: [],// 设备小类id
					state: "",          //  0:正常,1:使用中,2:维修中,3:维养中
					keyWord: "",        // 设备编号+设备名称模糊查询
					assetOwnership: "", // 自有资产/租赁资产
				},
				titleObj: {
					title: "设备类别及设备名称筛选",
					deviceType: "设备类型",
					deviceName: "设备名称"
				},
				isShowDeviceState: false,  // 是否显示 筛选设备框
			} 
		},
		mounted() {
			this.getStationList()
			this.getDeviceType()
			this.getDeviceList()
		},
		methods:{
			// 基地列表数据
			getStationList(){
				getStationList({typeIds: [102,104], name: ""}).then(res=>{
					this.stationList = [res.result]
				}) 
			},
			
			// 打开基地弹窗
			getstation(){
				console.log(111)
				this.isShowStation = true
			},
			
			// 基地的取消事件
			stationCancel(){
				this.isShowStation = false
				this.stationName = ""
				this.obj.stationId = ""
				this.getDeviceList()
			},
			
			// 基地的 confirm 事件
			stationConfirm(data){
				this.obj.stationId = data.value[0].id
				this.isShowStation = false
				this.stationName = data.value[0].name
				this.getDeviceList()
			},
			
			// 打开设备类型 和 设备名称弹窗
			getBaseSelect(){
				this.isShowBaseSelect = true
			},
			
			// 取消 设备筛选
			baseSelectCancel(){
				this.deviceTypeName = ""
				this.obj.deviceTypeIds = []
				this.isShowBaseSelect = false
				this.getDeviceList()
			},
			
			// 确定 设备筛选
			baseSelectConfrim(deviceList,selectDeviceTypeList, selectDeviceNameList){
				console.log(deviceList,selectDeviceTypeList, selectDeviceNameList)
				this.isShowPopupSelect = false
				let list = []
				this.deviceTypeList.forEach(item=>{
					selectDeviceTypeList.forEach(value=>{
						if(item.id === value){
							list.push(item.name)
						}
					})
				})
				this.deviceTypeName = list.join(",")
				this.isShowBaseSelect = false
				this.obj.deviceTypeIds = selectDeviceNameList
				this.getDeviceList()
			},
			
			// 设备类型 设备名称 数据
			async getDeviceType(){
				let _data ={
					name: "",
					ex1: 'equipment',
				}
				// 材料类型 树结构
				let res = await getDeviceType(_data)
				let list = res.result.map(item=>({ ...item, isChecked: false, id: item.id + ""}))
				let arr2 = list.filter(item=>item.treeLevel === 2).map(val=>({...val, childrenList:[]}))
				let arr3 = list.filter(item=>item.treeLevel === 3)
				
				arr2.forEach(item=>{
					arr3.forEach(value=>{
						if(item.id === value.parentId + ""){
							item.childrenList.push({...value, tempCode: item.id + '-' + value.id})
						}
					})
				})
				this.deviceTypeList = arr2
				console.log(this.deviceTypeList, '源数据')
			},
			
			// 获取所有设备数据
			getDeviceList(){
				getEquipmentInventoryList(this.obj).then(res=>{
					let list = res.result.map(item=>({...item, allName: item.deviceTypeName +'/'+ item.subDeviceTypeName, totalNum: 1}))
					let arr = this.DelSameObjValue(list, 'allName', 'totalNum').map(item=>({id: item.id, allName: item.allName, totalNum: item.totalNum, infoList: []}))
					arr.forEach(item=>{
						list.forEach(value=>{
							if(item.allName === value.allName){
								item.infoList.push(value)
							}
						})
					})
					this.deviceList = arr
				})
			},
			
			// 筛选 设备状态 和 资产归属
			getDeviceSelect(){
				this.isShowDeviceState = true
			},
			
			// 重置 筛选
			reset(){
				this.obj.assetOwnership = ""
				this.obj.state = ""
				this.isShowDeviceState = false
				this.getDeviceList()
			},
			
			// 确定 筛选
			confirm(deviceStateId, assetOwnership){
				this.obj.assetOwnership = assetOwnership
				this.obj.state = deviceStateId
				this.isShowDeviceState = false
				this.getDeviceList()
				// console.log(deviceStateId, assetOwnership)
			},
			
			// 搜索
			inputChange(value){
				if(value){
					this.obj.keyWord = value
				}else{
					this.obj.keyWord = ""
				}
				// clearInterval(this.time)
				// this.time = setTimeout(()=>{
					this.getDeviceList()
				// }, 500)
			},
			
			// 清空
			clearInput(){
				this.obj.keyWord = ""
				this.getDeviceList()
			},
			
			
			// 移库操作
			getMoveStock(){
				uni.navigateTo({
					url: "/subpackage-equipment/pages/device/deviceStock/deviceMovement"
				})
			},
			
			// 返回上一级
			goBack(url){
				uni.switchTab({
					url: url
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.deviceStock{
		/* #ifdef MP-WEIXIN */
			padding-top: 176rpx;
		/* #endif */
		padding-bottom: 80rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		background-color: #F5F7FA;
		position: relative;
		.search{
			padding: 30rpx;
			padding-bottom: 24rpx;
			background-color: #FFFFFF;
		}
		.image2{
			position: absolute;
			top: 40rpx;
			right: 40rpx;
			width: 50rpx;
			height: 50rpx;
		}
		.scroll-box{
			max-height: calc(100vh - 364rpx);
			padding-top: 10rpx;
		}
		.content{
			padding: 24rpx 32rpx;
			height: calc(100vh - 390rpx);
		}
		.nav2{
			background-color: #FFFFFF;
			height: 106rpx;
			border-bottom: 2rpx solid #E2E5ED;
			padding: 0rpx 26rpx;
			line-height: 106rpx;
			display: flex;
			align-items: center;
			.name{
				flex: 1;
				display: flex;
				align-items: center;
				.fonzt{
					flex: 1;
					width: 248rpx;
					font-size: 32rpx;
					font-weight: bold;	
					color: #445469;
					white-space:nowrap;
					overflow:hidden;
					text-overflow:ellipsis;
				}
				.active{
					color: #C0C0C0;
				}
				.image{
					width: 70rpx;
					height: 70rpx;
					margin-right: 24rpx;
				}
			}
		}
		.info{
			margin-top: 40rpx;
			.center{
				position: relative;
				background-color: #FFFFFF;
				padding: 32rpx 38rpx;
				padding-top: 12rpx;
				border-bottom: 2rpx solid #E2E5ED;
				.item{
					display: flex;
					margin-top: 20rpx;
					
					.name{
						width: 150rpx;
					}
				}
			}
		}
		.deviceState{
			position: absolute;
			top: 30rpx;
			right: 35rpx;
			height: 58rpx;
			line-height: 60rpx;			
			padding: 0rpx 30rpx;
			border-radius: 30rpx;
			font-size: 28rpx;
		}
		// 正常
		.color1{
			color: #14BE9F;
			border: 2rpx solid #14BE9F;
			background: rgba(224, 254, 243, 0.2);
		}
		// 维养中
		.color2{
			color: #FFA000;
			background: rgba(255, 247, 228, 0.3);
			border: 2rpx solid #FFA000;
		}
		// 使用中
		.color3{
			color: #2F80ED;
			background: rgba(47, 128, 237, 0.1);
			border: 2rpx solid #2F80ED;
		}
		// 维修中
		.color4{
			color: #FF6A6A;
			background: rgba(255, 106, 106, 0.05);
			border: 2rpx solid #FF6A6A;
		}
	}
</style>